<div id="devicemonthonlinedaily">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 300px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <ul id="ztree" class="ztree"></ul>
                    </div>
                </transition>
            </div>
        </div>
        <div style="margin-left:20px;" class="fl">
            {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
        </div>
        <div class="fl">
            <div style="height: 32px; line-height: 32px;padding: 0 10px;">{{$t("reportForm.selectMonth")}}:&nbsp;</div>
        </div>
        <div style="position: relative;" class="fl">
            <Date-Picker v-model="yearMonth" type="month" style="width: 150px"></Date-Picker>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="onClickQuery" icon="ios-search">{{$t("reportForm.query")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table ref="table" size="small" :columns="columns" :data="tableData" border :height="tableHeight" :loading="loading"></i-table>
    </div>
    <Modal v-model="modal" :title="$t('reportForm.onlineDate')" width="332">
        <div class="calendar-wrap">
            <div class="calendar-top">
                <div class="date-wrap">
                    {{year}}{{$t("reportForm.year")}}{{month}}{{$t("reportForm.month")}}
                </div>
            </div>
            <div class="inner-wrap">
                <div class="week-wrap">
                    <div v-for="item in textTop" :key="item">{{item}}</div>
                </div>
                <div class="dates-wrap">
                    <div v-for="(item , index) in datesArr" :key="index" :style="{background:item.isTheMonth?'#EAEEF0':''}">
                        <div class="full" :class="{noTheMonth:!item.isTheMonth ,'active-day':item.isActive}" :style="{cursor:item.isTheMonth?'pointer':''}">
                            {{item.day}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer">
            <div style="padding: 6px 0;"></div>
        </div>
    </Modal>
</div>